<template>
	<view class="container">
		<text class="demo-title">示例四：性能与高级控制</text>
		<!--
			disable-touch: 禁止用户 touch 操作
			skip-hidden-item-layout: 跳过隐藏滑块的布局
			easing-function: 指定切换缓动动画类型
		-->
		<swiper class="advanced-swiper" :current="currentIndex" :disable-touch="isTouchDisabled"
			:easing-function="easingFunction" :skip-hidden-item-layout="true" :circular="true">
			<!-- 内容与之前类似 -->
			<swiper-item v-for="(item, index) in items" :key="index">
				<view class="swiper-item-content" :style="{backgroundColor: item.color}">
					<text class="item-text">{{ item.text }}</text>
				</view>
			</swiper-item>
		</swiper>

		<view class="settings-panel">
			<view class="setting-item">
				<label>禁止手动滑动</label>
				<switch :checked="isTouchDisabled" @change="toggleTouch" />
			</view>
			<view class="setting-item">
				<label>切换动画</label>
				<picker @change="bindPickerChange" :value="easingIndex" :range="easingOptions">
					<view class="picker">
						当前: {{ easingOptions[easingIndex] }}
					</view>
				</picker>
			</view>
		</view>
		<button @click="goToNext" class="action-button">通过代码下一页</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				isTouchDisabled: false,
				easingOptions: ['default', 'linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'],
				easingIndex: 0,
				items: [{
						text: 'Page 1',
						color: '#F56C6C'
					},
					{
						text: 'Page 2',
						color: '#E6A23C'
					},
					{
						text: 'Page 3',
						color: '#67C23A'
					}
				]
			}
		},
		computed: {
			easingFunction() {
				return this.easingOptions[this.easingIndex];
			}
		},
		methods: {
			goToNext() {
				this.currentIndex = (this.currentIndex + 1) % this.items.length;
			},
			toggleTouch(e) {
				this.isTouchDisabled = e.detail.value;
			},
			bindPickerChange(e) {
				this.easingIndex = e.detail.value;
			}
		}
	}
</script>

<style>
	/* ...复用基础样式... */
	.advanced-swiper {
		height: 300rpx;
	}

	.settings-panel {
		padding: 20rpx;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.picker {
		color: #409EFF;
	}

	.swiper-item-content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 为卡片添加圆角和缩放效果，使其更像卡片 */
		transform: scale(0.9);
		border-radius: 20rpx;
		transition: transform 0.3s;
	}
</style>